<template>
  <view class="pg-outer rec-bag-pop-page" :style="{backgroundImage: `url(${staticHost + '/vide_drawal_bg.png'})`}">
    <uni-navbar
      :title="title"
      :border="false"
      :fixed="true"
      :height="barHeight"
      :rightWidth="60"
      :leftWidth="60"
      titleStyle="fontSize:18px;"
      :bgColor="isWhiteAppBar ? '#FF5500' : 'transparent'"
      :placeholder="false"
      :autoBack="true"
    >
      <view slot="left">
        <image
          v-if="!isMpAlipay && !isMpBaidu && !isMpToutiao"
          src="../../static/images/back_black2.png"
          class="back-icon"
          style="margin-left: -10rpx"
        ></image>
      </view>
      <view slot="right" v-if="isH5" class="flex items-center"  @click="toMingxi">
        <text class="font14">明细</text>
        <image :src="staticHost + '/video-arrow-left.png'" style="width:32rpx;height:32rpx;transform: rotate(180deg);"></image>
      </view>
    </uni-navbar>

    <scroll-view
      class="pg-scroll"
      :scroll-y="true"
      :refresher-enabled="false"
      :style="{ paddingTop: headHt, backgroundImage: `url(${staticHost + '/video_bg_coin.png'})` }"
      refresher-background="#ffffff"
    >
      <view style="padding: 32rpx 0 10rpx 32rpx; margin-top: 0rpx">
        <view style="display: flex; align-items: baseline;" @tap="toMingxi">
          <text class="text-style">我的现金</text>
          <view v-if="!isH5" class="flex items-center">
            <text class="font14" style="margin-left:20rpx;color:#222222;">明细</text>
            <image :src="staticHost + '/video-arrow-left.png'" style="width:32rpx;transform:rotate(180deg);" mode="widthFix"></image>
          </view>
        </view>
        <view class="box-1">
          <text class="text-1">{{ amount / 100 }}</text>
          <text class="text-2">元</text>
        </view>
      </view>
      <view class="fg-white box-3">
        <image class="img-alipay" :src="staticHost + '/wf_zfb.png'"></image>
        <view class="box-4">
          <view class="text-style">支付宝</view>
          <view class="text-5" v-if="!accoutNo">请绑定支付宝</view>
          <view class="text-5">{{ accoutNo }}</view>
        </view>
        <view v-if="accountStatus != 1" class="btn-bind" @tap="bindAlipay">{{ bindName }}</view>
      </view>
      <view class="fg-white">
        <view class="text-style text-6">提现金额</view>
        <view class="box-5">
          <block v-for="(item, index) in drawMoneyList" :key="item.id">
            <view
              v-if="visibleDrawItem(item)"
              class="box-item-ly"
              @tap="moneyItemOnclick(index, item)"
            >
              <view v-if="item.recv" class="receive-box">已领</view>
              <view class="box-lock" v-if="viewBlackBlock(item, index)">
                <image class="img-lock" v-if="item.status==0" :src="staticHost + '/wf_lock.png'" ></image>
                <text class="text" v-if="computeItemState(item)">{{ computeItemState(item) }}</text>
              </view>

              <view :class="['box-item', moneyPosition == index ? 'active' : '']">
                <view class="box-money">
                  <text class="money">{{ item.amount / 100 }}</text>
                  <text class="unit">元</text>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>

      <view style="height: 100rpx"></view>
    </scroll-view>


    <view class="pg-bottom">
      <view class="btn" @tap="sureClick">立即提现</view>
    </view>

    <!-- 提现成功 -->
    <u-popup
      v-model="visibleWithdralPop"
      class="rec-bag-pop"
      :border-radius="12"
      mode="center"
      :mask-custom-style="{background: 'rgba(0, 0, 0, 0.6)'}"
      style="background: transparent;"
      :mask-close-able="true"
      z-index="10081"
    >
      <view :class="['relative', isMpKuaishou ? 'ks-rec-dia' : '']" style="padding-bottom:100rpx;">
        <image :src="staticHost + '/video_pop_bg.png'" mode="widthFix" style="width:600rpx;"></image>
        
        <view class="absolute" style="top:0;width:100%;padding:56rpx 48rpx 0;">

          <view class="flex justify-center items-center" style="width:100%;">
            <image :src="staticHost + '/wf_zfb.png'" mode="widthFix" style="width:48rpx;margin-right:20rpx;"></image>
            <view class="font-bold" style="font-size:40rpx;">提现成功</view>
          </view>
          <view class="flex items-baseline justify-center relative" style="margin:60rpx 0 0; color:#FF282D;" >
            <text class="font-bold" style="font-size: 120rpx;line-height: 120rpx;margin-right:16rpx">
              {{ withdarwalMoney }}
            </text>
            <text class="font-bold" style="font-size: 60rpx;margin-right:16rpx">
              元
            </text>
          </view>
          <view class="font14 tx-info"
            :style="{backgroundImage: `url(${staticHost + '/video_tixian.png'})`}"
          >
            <view class="font16 font-bold">已打款到支付宝</view>
            <view class="flex justify-between" style="margin:36rpx 0">
              <text class="cor-grey">收款账户：</text>
              <text>{{accoutNo || ''}}</text>
            </view>
            <view class="flex justify-between">
              <text class="cor-grey">打款方式：</text>
              <text>支付宝</text>   
            </view>
          </view>
        </view>
        <image class="close-ico" :src="staticHost + '/video_pop_close.png'" mode="widthFix" @click="withdrawalSuccessHandler"></image>
      </view>
    </u-popup>

    <WfCommonPop v-if="isTip" v-model="isTip" :config="tipConfig" @hideEv="okEv"></WfCommonPop>
  </view>
</template>
<script>
import { staticHost } from '@/setting';
import { isH5, isMpKuaishou, isMpAlipay, isMpBaidu, isMpToutiao } from '@/utils/platform';
import { dateFormat } from '@/utils/util'

import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo';
import { ApplyWithdrawal, GetMoneyDetail } from '@/pages/welfare/api/index';
import WfCommonPop from '@/pages/welfare/components/WfCommonPop';
const app = getApp();

export default {
  mixins: [statusBarInfo],
  data() {
    return {
      staticHost,
      title: '提现',
      isWhiteAppBar: false,
      visibleWithdralPop: false,
      onlineThree: false,
      isH5,
      isMpKuaishou,
      isMpAlipay,
      isMpBaidu,
      isMpToutiao,
      amount: 0,
      accoutName: '',
      accoutNo: '',
      txTimes: 0,
      withdarwalMoney: '',
      activityDaily: {},
      //是否已认证 已认证不可以修改 -1未绑定 0已输入 1已认证
      accountStatus: -1,
      bindName: '',
      drawMoneyList: [],
      moneyPosition: -1,
      //提现金额ID
      configId: -1,
      isTip: false,
      tipConfig: {
        title: '温馨提示',
        content: '',
        isConfirm: false,
        btnTxt: '好的，我知道了！',
      },
    };
  },
  components: {
    WfCommonPop,
  },
  onShow() {
    this.getMoneyDetail();
  },
  onLoad() {
    if (isH5) {
      let { appId, channel, version, deviceId } = app.globalData
      let { userId, userNo, loginId, displayName } = app.globalData.userInfo || {};
      setTimeout(() => {
        const {aplus_queue} = window;
        if(aplus_queue) {
          aplus_queue.push({
            action: 'aplus.record',
            arguments: ['enter_withdral_page', 'CLK', {
              loginId, channel, userId, userNo, displayName, appId, version, deviceId
            }]
          });
        }
      }, 500)
    } else {
      let userInfo = app.globalData.userInfo;
      if (userInfo && userInfo.userId) {
        if (this.$uma && this.$uma.trackEvent) {
          this.$uma.trackEvent('enter_withdral_page', userInfo);
        }
      }
    }
  },
  methods: {
    withdrawalSuccessHandler() {
      this.withdarwalMoney = '';
      this.visibleWithdralPop = false;
      this.getMoneyDetail();
    },
    toMingxi() {
      this.$navigateTo('/pages/welfare/coinList')
    },
    viewBlackBlock(item, index) {
      if (index == 0) {
        if (item.recv == 0 && item.txTimes >=3 && this.onlineThree) {
          return false
        }
        return true;
      }
      if (item.status == 1) {
        return false;
      }
      return true;
    },
    visibleDrawItem(item) {
      if (item.id != 1) {
        if (item.recv > 0) {
          return false;
        }
      }
      return true;
    },
    computeItemState(item) {
      if (item.id == 1) {
        if (item.recv == 0) {
          if (item.txTimes<3) {
            return '新人专享'
          } else {
            console.log('this.onlineThree', this.onlineThree);
            if (this.onlineThree) {
              return null
            } else {
              let m = app.globalData.onlineBeginNumber
              if (m) {
                return `再看${Math.ceil(m/60)}分钟视频`
              }
              return '再看2分钟视频'
            }
          }
        } else {
          return item.remarker; 
        }
      } else if (item.id != 5) {
        let lxDays = this.activityDaily.findex;
        if (lxDays < item.days) {
          return `连续再来${item.days - lxDays}天`; 
        } else {
          return item.remarker;
        }
      }
      
      // if (this.golds >= item.golds) {
      //   if (this.txTimes) {
      //     return '明日还可提';
      //   } else {
      //     return '今日可提现';
      //   }
      // }
      // return '';
    },
    bindAlipay() {
      console.log('bindAlipay===' + this.accountStatus);
      if (this.accountStatus != 1) {
        let url = '/pages/welfare/bindAlipay?accoutName=' + this.accoutName + '&accoutNo=' + this.accoutNo;
        this.$navigateTo(url);
      }
    },
    getMoneyDetail() {
      GetMoneyDetail().then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let rule = data.rule;
          let txTimes = data.txTimes || 0;
          
          let userPayAccount = data.userPayaccount;
          if (userPayAccount) {
            this.setData({
              accoutName: userPayAccount.accoutName,
              accoutNo: userPayAccount.accoutNo,
              accountStatus: userPayAccount.status,
            });
          }
          let bindName = '绑定';
          if (this.accountStatus == 0) {
            bindName = '重新绑定';
          }

          let tixianThan3 = uni.getStorageSync('tixianThan3');
          let userId = data.activityDaily.userId || '';
          let today = dateFormat('YYYY-mm-dd', new Date()) +'_' + userId;
          
          let onlineThree = false;
          if (tixianThan3) {
            if (today == tixianThan3) {
              //  判断今天是在线3分钟
              onlineThree = true;
            }
          }

          this.setData({
            onlineThree,
            txTimes,
            drawMoneyList: data.txtypes,
            amount: data.bal,
            bindName: bindName,
            activityDaily: data.activityDaily,
          });
        }
      });
    },
    moneyItemOnclick(index, item) {
      this.setData({
        moneyPosition: index,
        configId: item.id,
      });
    },
    okEv() {
      this.isTip = false;
    },
    sureClick() {
      if (!this.accoutName || !this.accoutNo) {
        this.$showToast('请先绑定支付宝账号');
        return;
      }
      if (this.configId <= 0) {
        this.$showToast('请选择提现金额');
        return;
      }
      if (this.configId == 1) {
        let item = this.drawMoneyList[0]
        if (item.recv == 0) {
          if (item.txTimes >= 3) {
            if (!this.onlineThree) {
              let tip = '再看2分钟视频'
              let m = app.globalData.onlineBeginNumber
              if (m) {
                tip = `再看${Math.ceil(m/60)}分钟视频`
              }
              this.$showToast(tip);
              return;
            }
          }
        }
      }
      let parms = {
        txType: this.configId,
      };
      ApplyWithdrawal(parms).then((res) => {
        if (res.code == 200) {
          let conifg;
          let obj = this.drawMoneyList.find(per => per.id == this.configId)
          if (obj) {
            this.withdarwalMoney = (obj.amount / 100).toFixed(2)
            this.visibleWithdralPop = true;
          } else {
            conifg = {
              title: '温馨提示',
              content: '您已提现成功，提现金额已自动到账支付宝',
              isConfirm: false,
              btnTxt: '好的，我知道了！',
            };
          }

          if (conifg) {
            this.setData({
              isTip: true,
              tipConfig: conifg,
            });
          }
          setTimeout(() => {
            this.getMoneyDetail();
          }, 1000)

          if(isH5) {
            const {aplus_queue} = window;
            if(aplus_queue) {
              let { appId, channel, version, deviceId } = app.globalData
              let { userId, userNo, loginId, displayName } = app.globalData.userInfo || {};
              aplus_queue.push({
                action: 'aplus.record',
                arguments: ['video_withdraw_success', 'CLK', {
                  loginId, channel, userId, userNo, displayName, appId, version, deviceId
                }]
              });
            }
          } else {
            let userInfo = app.globalData.userInfo;
            if (userInfo && userInfo.userId) {
              if (this.$uma && this.$uma.trackEvent) {
                this.$uma.trackEvent('video_withdraw_success', userInfo);
              }
            }
          }
        }
      }).catch(e => {
        console.log('ee ', e);
        // if (e) {
        //   let conifg = {
        //     title: '温馨提示',
        //     content: '提现失败',
        //     isConfirm: false,
        //     btnTxt: '好的，我知道了！',
        //   };
        //   this.setData({
        //     isTip: true,
        //     tipConfig: conifg,
        //   });
        // }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pg-outer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f50, rgba(255, 68, 0, 0));
  background-size: contain;
  background-repeat: no-repeat;

  .bg-arw {
    position: absolute;
    right: 0;
    top: 116rpx;
    width: 380rpx;
    height: 380rpx;
  }

}
.pg-scroll {
  flex: 1;
  overflow: hidden;
  width: 100%;
  background-size: 380rpx 380rpx;
  background-repeat: no-repeat;
  background-position: right 180rpx;
}
.text-style {
  font-weight: bold;
  color: #1a1b1e;
  font-size: 36rpx;
}
.text-tip {
  color: #7b828e;
  font-size: 28rpx;
}
.fg-white {
  margin: 32rpx 32rpx 0 32rpx;
  background-color: #fff;
  border-radius: 32rpx;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(77, 14, 0, 0.2);
}
.box-1 {
  display: flex;
  align-items: flex-end;
  margin-top: 10rpx;
}
.text-1 {
  color: #f65352;
  font-size: 96rpx;
  font-weight: bold;
}
.text-2 {
  color: #f65352;
  font-size: 28rpx;
  font-weight: bold;
  margin: 0 24rpx 28rpx 12rpx;
}

.text-5 {
  color: #7b828e;
  font-size: 24rpx;
  margin-top: 12rpx;
}
.text-6 {
  padding: 32rpx 0 10rpx 32rpx;
}
.box-3 {
  padding: 0 32rpx;
  height: 160rpx;
  display: flex;
  align-items: center;
}
.img-alipay {
  height: 96rpx;
  width: 96rpx;
}
.box-4 {
  margin-left: 16rpx;
  flex: 1;
}
.btn-bind {
  height: 64rpx;
  width: 144rpx;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  line-height: 64rpx;
  border-radius: 32rpx;
  background: linear-gradient( 79deg, #FF282D 0%, #FF752B 100%);
}
.box-5 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10rpx 32rpx 32rpx;
}
.box-item-ly {
  height: 160rpx;
  width: calc(33.333% - 20rpx );
  margin: 20rpx 20rpx 0 0;
  position: relative;
  .box-item {
    height: 100%;
    width: 100%;
    background-color: #f8eded;
    border: 2rpx solid #fff;
    border-radius: 24rpx;
    position: relative;
    &.active {
      border: 2rpx solid #ff7733;
    }
    .box-money {
      display: flex;
      align-items: flex-end;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 64rpx;
      .money {
        color: #f65352;
        font-size: 48rpx;
      }
      .unit {
        color: #f65352;
        font-size: 28rpx;
        margin-bottom: 10rpx;
        font-weight: bold;
      }
    }
  }
  .receive-box {
    position: absolute;
    top: -6px;
    left: -6px;
    height: 40rpx;
    padding: 0 8px;
    background: #f65352;
    color: #fff;
    border-radius: 20rpx;
    z-index: 3;
    font-size: 20rpx;
    display: flex;
    align-items: center;
  }
  .box-lock {
    height: 36rpx;
    width: 176rpx;
    background: rgba(246, 83, 82, 0.16);
    border-radius: 12rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;


    .img-lock {
      height: 24rpx;
      width: 20rpx;
    }
    .text {
      color: #f65352;
      font-size: 22rpx;
      margin-left: 6rpx;
    }
  }
}

.close-ico {
  width: 72rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
}
.tx-info {
  text-align: center;
  border-radius: 32rpx;
  padding: 32rpx;
  margin-top: 50rpx;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 93% 18%;
}
</style>